<template>
  <div>
    <h2>{{state.msg}}</h2>
    <h2>{{state.data.name}}</h2>
    <button @click="changeName">修改</button>
  </div>


</template>

<script>
import { reactive } from './reativity/reactive.js';
import { effect } from './reativity/effect.js'
import { ref } from './reativity/ref.js'

export default {
  setup() {
    const state = reactive({
      msg: 'Hello',
      data: {
        name: '胡总'
      }
    })

    const num = ref({a: 1})

    console.log(num);
    

    

    effect(() => {
      console.log(num.value * 100);
      
    }, {lazy: false})



    const changeName = () => {
      state.msg = 'world'
    }
    

    return {state, changeName}
  }
}
</script>

<style lang="css" scoped>

</style>